import React, { Component } from 'React';
import Head from 'views/component/head/head';
import { Picker, List, InputItem, Toast } from 'antd-mobile';
import SelectTitle from 'views/component/selectTitle/selectTitle';
import SelectRadioItem from 'views/component/radioOne/radio';
import { SubViewLink } from 'views/component/subViewLink/subViewLink';
import { createForm } from 'rc-form';
import api from 'js/api/index';
import './add.scss';
import { i18n } from 'js/core/i18n';

let typeList = [
	{
		label: i18n.get('客流设备'),
		value: 1,
	},
	{
		label: i18n.get('监控设备'),
		value: 2,
	},
	{
		label: i18n.get('人脸设备'),
		value: 3,
	},
	{
		label: i18n.get('EAS设备'),
		value: 4,
	},
	{
		label: i18n.get('RFID设备'),
		value: 5,
	},
];

class AddDevice extends Component {
	constructor() {
		super();
		this.state = {
			payType: 1,
			shop: null,
		};
	}
	shopNameOnChange = (shopInfo) => {
		this.setState({ shop: shopInfo })
	}
	submit = () => {
		let data = this.props.form.getFieldsValue();
		if (!this.state.shop || !data.DeviceTypeID || !data.devid || !data.DeviceName) {
			Toast.fail(i18n.get('请输入完整的信息'), 2)
			return
		}
		data.ShopId = this.state.shop.ShopId;
		data.DeviceTypeID = data.DeviceTypeID[0];
		api('/Device/DeviceAddEdit', data, 'POST').then((data) => {
			if (data.code === -1) {
				Toast.fail(data.message, 2)
			} else {
				Toast.success(i18n.get('添加成功'));
				if (this.props.modelData && this.props.modelData.complete) {
					this.props.modelData.complete();
					FW.emit('back');
				}
			}
		})
	}
	render() {
		const { getFieldProps } = this.props.form;
		let { shop } = this.state;
		const radioes = [{
			name: i18n.get('入店'),
			id: 1,
		}, {
			name: i18n.get('过客'),
			id: 2,
		}, {
			name: i18n.get('试衣'),
			id: 3,
		}, {
			name: i18n.get('其他'),
			id: 4,
		}];
		return (
			<div id="add-device">
				<div className="add-content device-container">
					<List>
						<div className="deviceItem device-border flex-vcenter">
							<SelectTitle classStyle="required">{i18n.get('门店名称')}</SelectTitle>
							<SubViewLink moduleName="shopSearch" className="flex-g-1 text-right deviceItemContent" title={i18n.get('选择店铺')} modelData={{ onChange: this.shopNameOnChange }}>
								{shop ? shop.ShopName : <div style={{ color: '#909090' }}>{i18n.get('选择店铺')}</div>}
							</SubViewLink>
						</div>
						<InputItem
							{...getFieldProps('devid') }
							clear
							placeholder={i18n.get("设备ID")}
							className="device-border"
						><SelectTitle classStyle="required">{i18n.get('设备ID')}</SelectTitle></InputItem>
						<Picker extra={i18n.get("请选择")} okText={i18n.get("确定")} dismissText={i18n.get("取消")}
							data={typeList}
							cols={1}
							extra={i18n.get("请选择")}
							{...getFieldProps('DeviceTypeID') }
						>
							<List.Item arrow="horizontal">
								<SelectTitle classStyle="required">{i18n.get('设备类型')}</SelectTitle>
							</List.Item>
						</Picker>
						<InputItem
							{...getFieldProps('DeviceName') }
							clear
							placeholder={i18n.get("设备名称")}
							className="device-border"
						><SelectTitle classStyle="required">{i18n.get('设备名称')}</SelectTitle></InputItem>
						<InputItem
							clear
							placeholder={i18n.get("安装位置")}
							className="device-border"
						><SelectTitle >{i18n.get('安装位置')}</SelectTitle></InputItem>
						<div className="add-data">
							<div className="add-group">{i18n.get('数据源')}</div>
							<div className="add-radio">
								<SelectRadioItem data={radioes}	{...getFieldProps('DeviceClassID', { initialValue: 1 }) } />
							</div>
						</div>
						<InputItem
							{...getFieldProps('Remark') }
							clear
							placeholder={i18n.get("备注")}
							className="device-border"
						><SelectTitle >{i18n.get('备注')}</SelectTitle></InputItem>
					</List>
				</div>
				<div className="add-info mb"> <b>*</b>{i18n.get('必填项')}</div>

				<div className="device-btn">
					<button type="button" className="btn btn-primary" onClick={this.submit}>{i18n.get('添加设备')}</button>
				</div>
			</div>
		);
	}
}

export default createForm()(AddDevice);
